<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">附近店铺</h3>
    <el-form :model="nearbyShopForm" class="label-black" ref="nearbyShopForm" label-width="76px">
      <div class="set-part mt20">
        <el-form-item label="店铺信息">
          <el-radio-group v-model="nearbyShopForm.style.selectType">
            <el-radio :label="1">选择店铺</el-radio>
            <el-radio :label="2">条件加载</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="list_part">
          <div v-if="nearbyShopForm.style.selectType===1" class="goods_box">
            <ul class="goods_list" v-for="(item, index) in nearbyShopForm.data.shopsPics" :key="index">
              <li class="goods_item">
                <img class="goods_pic" :src="item" />
                <i class="goods_delete el-icon-close" @click="deleteShops(index)"></i>
              </li>
            </ul>
            <div class="add-goods" @click="selectShops()"><i class="el-icon-plus"></i></div>
          </div>
          <div v-if="nearbyShopForm.style.selectType===2">

          </div>
        </div>

        <el-form-item label="显示个数" prop="style.showNum">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="nearbyShopForm.style.showNum"></el-slider>
            <el-input class="row-input" v-model.number="nearbyShopForm.style.showNum"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="显示范围" prop="style.showRange">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="nearbyShopForm.style.showRange"></el-slider>
            <el-input class="row-input" v-model.number="nearbyShopForm.style.showRange"></el-input>
          </div>
        </el-form-item>
        <!-- 商品样式结束 -->

        <!-- 商品展示配置开始 -->
        <el-form-item label="店铺标签" prop="style.showTag">
          <div class="flex">
            <div class="val-show flex-1">{{nearbyShopForm.style.showTag?'显示':'不显示'}}</div>
            <el-checkbox v-model="nearbyShopForm.style.showTag"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="用户评价" prop="style.showEvaluate">
          <div class="flex">
            <div class="val-show flex-1">{{nearbyShopForm.style.showEvaluate?'显示':'不显示'}}</div>
            <el-checkbox v-model="nearbyShopForm.style.showEvaluate"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="热卖商品" prop="style.showHotGoods">
          <div class="flex">
            <div class="val-show flex-1">{{nearbyShopForm.style.showHotGoods?'显示':'不显示'}}</div>
            <el-checkbox v-model="nearbyShopForm.style.showHotGoods"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="热卖个数" prop="style.hotNum">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="nearbyShopForm.style.hotNum"></el-slider>
            <el-input class="row-input" v-model.number="nearbyShopForm.style.hotNum"></el-input>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">提交预览</el-button>

    <el-dialog title="提示" :visible.sync="showShopList" width="650px" :append-to-body="true">
      <en-table-layout
        :tableData="shopData.data"
        :height="300"
        ref="shopTable"
        :selection-change="handleSelectionChange">
        <div slot="toolbar" class="inner-toolbar">
          <div class="toolbar-search">
            <div class="searchName">
              <span>
                店铺名称:
              </span>
              <el-input class="row-input" v-model.number="shopName"></el-input>
              <el-button type="primary" @click="getShopsList(1)">搜索</el-button>
            </div>
          </div>
        </div>
        <template slot="table-columns">
          <el-table-column type="selection" width="60"></el-table-column>
          <el-table-column label="图片" width="180">
            <template slot-scope="{ row }">
              <img :src="row.shop_logo" alt="" class="shop-logo">
            </template>
          </el-table-column>
          <el-table-column prop="shop_name" label="名称" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </template>
          <el-pagination
            v-if="shopData"
            slot="pagination"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            :current-page="shopData.page_no"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="shopData.page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="shopData.data_total">
          </el-pagination>
        </en-table-layout>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="handleCancelShopList()">取 消</el-button> -->
        <el-button type="primary" @click="handleSubmitShopList()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import mixin from '../../mixin';
  import * as API_SHOP from '../../../src/api/shop.js';
  let defaultForm = {
    data: {
      shopIds: [], // 商品ids
      shopsPics: [] // 商品照片
    },
    style: {
      selectType: 1,  // 商品选择类型
      showEvaluate: true, // 用户评价
      showNum: 10, // 显示个数
      showRange: 10, // 显示范围
      showTag: true, // 展示标签
      showHotGoods: true, // 是否显示热卖商品
      hotNum: 10
    }
  };
  export default {
    name: 'EnNearbyShopsPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        nearbyShopForm: JSON.parse(JSON.stringify(defaultForm)),
        showShopList: false,
        shopName: '',
        shopData: [],
        params: {
          page_no: 1,
          page_size: 20
        },
        selectShopsId: [],
        selectShopsImg: []
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        this.nearbyShopForm = JSON.parse(JSON.stringify(defaultForm));
        let { blockStyle, shopsPic, shopsId } = JSON.parse(JSON.stringify(newVal));
        this.$nextTick(() => {
          if(shopsPic){
            this.nearbyShopForm.data.shopsPics = shopsPic;
            this.nearbyShopForm.data.shopIds = shopsId;
          }
          if(blockStyle){
            this.nearbyShopForm.style = blockStyle;
          }
        });
      }
    },
    methods: {
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.getShopsList()
      },
      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.getShopsList()
      },
      /**
        * @date 2021/03/10
        * @author kaiqiang
        * @description { 获取店铺列表 }
      */
      getShopsList(searchParam) {
        if (searchParam) {
          this.params.shop_name = this.shopName
        }
        this.params.local_micro_page = 3
        API_SHOP.getAdminShops(this.params)
          .then(response => {
            this.shopData = response;
            
            // console.log('shopIds:', this.nearbyShopForm.data.shopIds)
            this.shopData.data.forEach((item, index) => {
              // this.shopData.data.forEach((dataItem, index) => {
              //   if ( item === dataItem.shop_id ) {
              //     console.log('index:', dataItem.shop_id)
              //     this.$nextTick(() => {
              //       this.$set(dataItem,'selected', true)
              //       this.selectShopsId.push(dataItem.shop_id);
              //       this.selectShopsImg.push(dataItem.shop_logo);
              //       this.$refs.shopTable.$refs.table.toggleRowSelection(this.shopData.data[index], true)
              //     })
              //   }
              // })
              
              if ( this.nearbyShopForm.data.shopIds.indexOf( item.shop_id ) !== -1) {
                this.$nextTick(() => {
                  this.selectShopsId = []
                  this.selectShopsImg = []
                  this.$set(item,'selected', true)
                  this.selectShopsId.push(item.shop_id);
                  this.selectShopsImg.push(item.shop_logo);
                  this.$refs.shopTable.$refs.table.toggleRowSelection(this.shopData.data[index], true)
                })
              }

            })
          })
      },
      /**
        * @date 2021/03/10
        * @author kaiqiang
        * @description { 选择店铺弹框 }
      */
      selectShops () {
        this.showShopList = true;
        this.getShopsList();
      },
      /**
        * @date 2021/03/10
        * @author kaiqiang
        * @description { 确定弹框的按钮 }
      */
      handleSubmitShopList() {
        this.showShopList = false;
        this.$nextTick(() => {
          this.nearbyShopForm.data.shopIds = this.unique(this.selectShopsId);
          this.nearbyShopForm.data.shopsPics = this.unique(this.selectShopsImg)
          // this.nearbyShopForm.data.shopIds = this.selectShopsId
          // this.nearbyShopForm.data.shopsPics = this.selectShopsImg
        });
      },
      /**
        * @date 2021/03/22
        * @author kaiqiang
        * @description { 多选 }
      */
      handleSelectionChange(data) {
        if (data && data.length) {
          this.selectShopsId = []
          this.selectShopsImg = []
          data.forEach(item => {
            this.$nextTick(()=>{
              this.selectShopsId.push(item.shop_id);
              this.selectShopsImg.push(item.shop_logo);
            })
          })
        }
      },
      /**
        * @date 2021/03/23
        * @author kaiqiang
        * @description { 数组去重 }
      */
      unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        let array = [];
        for (let i = 0; i < arr.length; i++) {
            if (array .indexOf(arr[i]) === -1) {
                array .push(arr[i])
            }
        }
        return array;
      },
      /**
        * @date 2021/03/10
        * @author kaiqiang
        * @description { deleteShops }
      */
      deleteShops(_index) {
        this.nearbyShopForm.data.shopIds.splice(_index, 1);
        this.nearbyShopForm.data.shopsPics.splice(_index, 1);
      },
      /**
        * @date 2021/03/10
        * @author kaiqiang
        * @description { 数据提交 }
      */
      handleConfirm() {
        this.$refs['nearbyShopForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.MixinClone(this.nearbyShopForm));
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ .list_part {
  margin-left: -20px;
  margin-right: -20px;
  padding: 5px 15px;
  overflow: hidden;
  background: #f2f2f2;
  .goods_box {
    .goods_list {
      float: left;
      list-style: none;
      padding-left: 0;
      margin: 0;
      &::before,
      &::after {
        content: '';
        display: block;
        clear: both;
        overflow: hidden;
      }
    }
    .goods_item,
    .add-goods {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: relative;
      float: left;
      margin: 5px 10px 5px 0;
      width: 65px;
      height: 65px;
      border: solid 1px #e6e6e6;
      box-sizing: border-box;
      cursor: pointer;
      background: #fff;
      color: #3870EA;
      font-size: 18px;
      font-weight: 700;
    }
    .goods_pic {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
    .goods_delete {
      position: absolute;
      top: -8px;
      right: -8px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      cursor: pointer;
      background: #CACACA;
      color: #fff;
      font-size: 14px;
    }
  }
}
.shop-logo {
  // width: 90px;
  // height: 90px;
  width: 25%;
  vertical-align: middle;
}
.toolbar-search {
  width: 100%;
  .searchName {
    display: flex;
    flex-flow: row nowrap;
    line-height: 32px;
    /deep/ .el-input {
      width: auto!important;
      margin: 0 5px;
    }
  }
}
</style>
